<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="12">
            <h4 class="form-header h4">车辆</h4>
            <el-row :gutter="10" class="mb8" type="flex" justify="end">
               <el-col :span="1.5">
                  <el-button type="primary" plain @click="handleVehiclesAdd">车辆授权</el-button>
               </el-col>
            </el-row>
            <el-table max-height="100%" v-loading="loading" :row-key="getRowKey" @row-click="clickVehiclesRow"
               ref="vehiclesRef" @selection-change="handleVehiclesChange" :data="vehicles">
               <el-table-column label="序号" width="55" type="index" align="center">
                  <template #default="scope">
                     <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
                  </template>
               </el-table-column>
               <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
               <el-table-column label="车牌" align="center" prop="plateNo" />
               <el-table-column label="车号/自编号" align="center" prop="numbered" />
               <el-table-column label="部门" align="center" prop="deptName" />
            </el-table>
         </el-col>
         <el-col :span="12">
            <h4 class="form-header h4">线路</h4>
            <el-row :gutter="10" class="mb8" type="flex" justify="end">
               <el-col :span="1.5">
                  <el-button type="primary" plain @click="handleRouteAdd">线路授权</el-button>
               </el-col>
            </el-row>
            <el-table v-loading="routesLoading" :row-key="getRowKey" @row-click="clickRouteRow" ref="routesRef"
               @selection-change="handleRouteChange" :data="routes">
               <el-table-column label="序号" width="55" type="index" align="center">
                  <template #default="scope">
                     <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
                  </template>
               </el-table-column>
               <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
               <el-table-column label="线路编号" align="center" prop="code" />
               <el-table-column label="线路名称" align="center" prop="name" />
               <el-table-column label="线路复合类型" align="center" prop="compoundType" width="110">
                  <template #default="scope">
                     <span>{{ scope.row.compoundType == 1 ? '主线路' : '从线路' }}</span>
                  </template>
               </el-table-column>
               <el-table-column label="主线路" align="left" prop="mainRouteId" min-width="110">
                  <template #default="scope">
                     <dict-tag :options="dictTagHostRoutes" :value="scope.row.mainRouteId"
                        v-if="scope.row.compoundType == 2" />
                     <span v-else></span>
                  </template>
               </el-table-column>
            </el-table>
         </el-col>
      </el-row>

      <el-form label-width="100px">
         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
            <el-button @click="close()">返回</el-button>
         </div>
      </el-form>
   </div>
</template>

<script setup name="Share">
import { userRouteList, addUserRoute, userVehicleList, addUserVehicle } from "@/api/basic/user";
import { listVehicle } from "@/api/basic/vehicle";
import { listRoute } from "@/api/basic/route";
import { onMounted } from "vue";

const route = useRoute();
const { proxy } = getCurrentInstance();

const loading = ref(true);
const routesLoading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const vehicleIds = ref([]);
const routeIds = ref([]);
const vehicles = ref([]);
const routes = ref([]);
const dictTagHostRoutes = ref([])

/** 单击选中行数据 */
function clickVehiclesRow(row) {
   proxy.$refs["vehiclesRef"].toggleRowSelection(row);
};
/** 多选框选中数据 */
function handleVehiclesChange(selection) {
   vehicleIds.value = selection.map(item => item.id);
};
/** 单击选中行数据 */
function clickRouteRow(row) {
   proxy.$refs["routesRef"].toggleRowSelection(row);
};
/** 多选框选中数据 */
function handleRouteChange(selection) {
   routeIds.value = selection.map(item => item.id);
};
/** 保存选中的数据编号 */
function getRowKey(row) {
   return row.id;
};
/** 关闭按钮 */
function close() {
   const obj = { path: "/system/user" };
   proxy.$tab.closeOpenPage(obj);
};
/** 提交按钮 */
function handleVehiclesAdd() {
   const userId = route.params.userId
   console.log('selected', proxy.$refs["vehiclesRef"].getSelectionRows())
   addUserVehicle({ userId: userId, list: vehicleIds.value }).then(response => {
      proxy.$modal.msgSuccess("授权成功");
      // close();
   });
};
function handleRouteAdd() {
   const userId = route.params.userId
   console.log('selected', proxy.$refs["vehiclesRef"].getSelectionRows())
   addUserRoute({ userId: userId, list: routeIds.value }).then(response => {
      proxy.$modal.msgSuccess("授权成功");
      // close();
   });
};
onMounted(() => {
   console.log('start1123')
});

(async () => {
   const userId = route.params && route.params.userId;
   const deptId = route.params && route.params.deptId;
   if (userId && deptId) {
      loading.value = true;
      let where = {
         deptId,
         userId,
         pageSize: 1000
      }
      let userVehicleLists = await userVehicleList(where);
      let selectedVehicles = userVehicleLists.rows.map((item) => {
         return item.vehicleId
      })
      listVehicle(where).then(res => {
         vehicles.value = res.rows
         loading.value = false;
         nextTick(() => {
            res.rows.forEach(row => {
               if (selectedVehicles.includes(row.id)) {
                  proxy.$refs["vehiclesRef"].toggleRowSelection(row, true);
               }
            })

         });
      })
      let userRouteLists = await userRouteList(where)
      let selectedRoutes = userRouteLists.rows.map((item) => {
         return item.routeId
      })
      listRoute(where).then(res => {
         routes.value = res.rows
         routesLoading.value = false;
         dictTagHostRoutes.value = [];
         nextTick(() => {
            res.rows.forEach(row => {
               dictTagHostRoutes.value.push({
                  value: row.id,
                  label: row.name,
                  elTagType: 'danger'
               })
               if (selectedRoutes.includes(row.id)) {
                  proxy.$refs["routesRef"].toggleRowSelection(row, true);
               }
            })

         });
      })
   }
})();
</script>
